<template>
  <div>
    <table
      border="1"
      width="700"
      style="border-collapse: collapse"
    >
      <caption>
        购物车
      </caption>
      <thead>
        <tr>
          <th>
            <input type="checkbox" @click="changeAll"/> <span>全选</span>
          </th>
          <th>名称</th>
          <th>价格</th>
          <th>数量</th>
          <th>总价</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="item in list" :key="item.id">
          <td>
            <input type="checkbox" v-model="item.checked" @click="changeFn">
          </td>
          <td>{{item.name}}</td>
          <td>{{item.price}}</td>
          <td>
            <button @click="subFn(item.name)">-</button>
            {{item.num}}
            <button @click="addFn(item.name)">+</button>
            </td>
          <td>{{item.num*item.price}}</td>
          <td>
            <button @click="delFn(item.name)">删除</button>
          </td>
        </tr>
      </tbody>
      <tfoot>
        <tr>
          <td>合计:{{$store.getters.total}}</td>
          <td colspan="5">
            
          </td>
        </tr>
      </tfoot>
    </table>
  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  data() {
    return {
    };
  },
  computed:{
    ...mapState(['list'])
  },
  methods:{
    changeFn(){

    },
    delFn(name){
      this.$store.commit('delFn',name)
    },
    addFn(name){
      this.$store.commit('addFn',name)

    },
    subFn(name){
      this.$store.commit('subFn',name)
    },
    changeAll(val){
      console.log(val);
    }
  }
};
</script>

<style>
</style>